<template>
    <div id="LookThroughMost">
      <div class="content">
        <ul class="contents">
          <li v-for="lookthrough in lookthroughlist" :key="lookthrough.menuId">
              <router-link :to="{name: 'DishDetails',params: {id: lookthrough.menuId}}">
                <img :src="lookthrough.menuSrc" class="cook-img" alt="">
              </router-link>
          <div class="cook-info">
             <router-link :to="{name: 'DishDetails',params: {id: lookthrough.menuId}}">
                <div class="cookname">{{lookthrough.menuName}}</div>
            </router-link>
          <p class="major">{{lookthrough.introduce}}</p>
          <div class="score">
            <span>浏览：
            <b>{{lookthrough.doh}}</b>
          </span>
          <span>
            收藏：
            <b>{{lookthrough.collection}}</b>
          </span>
          </div>
          <router-link :to="{name: 'CenterRecipes',params: {  userId:lookthrough.userId}}">
            <div class="auther"><img :src="lookthrough.headImg" alt="" class="auther-head">{{lookthrough.nickname}}</div>
          </router-link>
              <!-- <div class="auther"><a href="" class="headicon"><img :src="lookthrough.headImg" alt="">{{lookthrough.nickname}}
              </a></div> -->
              </div>
            </li>
        </ul>
      </div>
      <span v-show="displaycontent" class="nocontent">暂时没有更多的内容~</span><div v-show="buttonpage">
     <el-pagination  background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNow"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </div></div>
</template>
<script>
// import cookie from '../../../../cookien/index'
export default {
  name: 'LookThroughMost',
  data () {
    return {
      pageNow: 1,
      pageSize: 1,
      lookthroughlist: [],
      total: 0,
      displaycontent: false,
      buttonpage: true
    }
  },
  created () {
    this.lookthrough()
  },
  methods: {
    lookthrough () {
      this.$axios({
        method: 'get',
        url: '/Menu/Visitor/findAllMenuByDohNameLike',
        params: {
          key: this.$store.state.searchMsg,
          pageNow: this.pageNow,
          pageSize: this.pageSize
        },
        headers: {
          token: this.$store.state.token
        }
      }).then(data => {
        this.lookthroughlist = data.data.object.list
        if (data.data.object.list.length === 0) {
          this.displaycontent = !this.displaycontent
          this.buttonpage = !this.buttonpage
        } else {
          this.userlist = data.data.object.list
          this.total = data.data.object.total
        }
      })
    },
    // 监测当前一页有几条数据
    handleSizeChange (size) {
      this.pageSize = size
      this.lookthrough()
    },
    // 监测当前页数
    handleCurrentChange (num) {
      this.pageNow = num
      this.lookthrough()
    }
  }
}

</script>
<style lang="less" scoped>
.content{
  min-height: 268px;
}
.nocontent{
    margin: 40px;
    display: block;
    text-align: center;
    color: #999;
}
.el-pagination{
text-align: center
}
.contents{
  width: 100%;
  li{
    height: 100px;
    padding-bottom: 40px;
    .cook-img{
     width: 180px;
    height: 125px;
    float: left;
    border-radius: 8px;
    overflow: hidden;
    margin-right: 15px;
    }
    .cook-info{
      width: 495px;
    height: 125px;
    float: left;
    .cookname{
      padding-top: 8px;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    line-height: 18px;
    display: inline-block;
    width: 483px;
    margin-bottom: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #333;
    text-decoration: none;
    &:hover{
      color: #FFB31A
    }
    }
    .major{
      text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 14px;
    vertical-align: middle;
    }
    .score{
      margin: 11px 0 10px;
      span{
        text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 14px;
    vertical-align: middle;
      }
    }
    .auther{
      font-size: 14px;
    line-height: 22px;
    height: 24px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    .headicon{
      display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    img{
      display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: middle;
    border-radius: 50%;
    position: relative;
    top: -2px;
    margin-right: 10px;
    }
      }
    }
    }
  }
}
.auther-head{
  display: inline-block;
  width: 21px;
  height: 21px;
  vertical-align: middle;
  border-radius: 50%;
    position: relative;
    top: -2px;
    padding-right: 10px;
}
.el-pagination{
  text-align: center;
}
</style>
